<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">圆形</block>
		</cu-custom>
		<form >
			<view class="cu-form-group margin-top">
				<view class="title" style="font-weight: 800;">请您输入任意一个数值进行计算</view>
			</view>
			<view class="cu-form-group ">
				<view class="title">直径</view>
				<input placeholder="直径" name="diameter" v-model="diameter"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">面积</view>
				<input placeholder="面积" name="area" v-model="area"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">圆周长</view>
				<input placeholder="圆周长" name="circumference" v-model="circumference"></input>
			</view>
			<view class="cu-form-group">
				<button class="cu-btn bg-grey " @click="clear">清空</button>
				<button class="cu-btn  bg-blue" @click="submit">计算</button>
				
			</view>

		</form>
		<view class="cu-form-group margin-top align-start">
			<view class="title">结果</view>
			<textarea maxlength="-1"   v-model="result" disabled></textarea>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {			
				diameter: '',
				area: '',
				circumference: '',
				result:''
			};
		},
		methods: {
			submit() {
				let data = null;
				if(this.diameter!="")
					data = {
						diameter: parseFloat(this.diameter)
					};
				if(this.area!="")
					data = {
						area: parseFloat(this.area)
					};
				if(this.circumference!="")
					data = {
						circumference: parseFloat(this.circumference)
					};
				uni.request({
				    url: 'http://localhost:8000/api/circle', //仅为示例，并非真实接口地址。
					method:'POST',
				    data:data,
					dataType: 'json',
				    header: {
						'Content-Type': 'application/json;charset=UTF-8',
				    },
				    success: (res) => {
				        console.log(res.data);
						// this.diameter=res.data.diameter;
						// this.area=res.data.area;
						// this.circumference=res.data.circumference;
				        this.result = `直径：${res.data.diameter}\n面积：${res.data.area}\n圆周长：${res.data.circumference}`;
				    }
				});
				
			},
			clear(){
				this.diameter="";
				this.area="";
				this.circumference="";
				this.result="";
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>
